<template>
  <div class="count-box">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="item">
          <h6>昨日新增合同数（份）</h6>
          <h2>
            {{
              obj.homeData.contractNumber ? obj.homeData.contractNumber.num : 0
            }}
          </h2>
          <span>
            <i
              :class="
                obj.homeData.contractNumber &&
                obj.homeData.contractNumber.percentage < 0
                  ? 'down'
                  : obj.homeData.contractNumber &&
                    obj.homeData.contractNumber.percentage > 0
                  ? 'up'
                  : ''
              "
            >
              {{
                obj.homeData.contractNumber &&
                obj.homeData.contractNumber.percentage > 0
                  ? '+'
                  : ''
              }}
              {{
                obj.homeData.contractNumber
                  ? obj.homeData.contractNumber.percentage
                  : 0
              }}%
            </i>
            <em>较上一日新增</em>
          </span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item">
          <h6>昨日新增合同金额（元）</h6>
          <h2>
            {{
              obj.homeData.contractAmount ? obj.homeData.contractAmount.num : 0
            }}
          </h2>
          <span>
            <i
              :class="
                obj.homeData.contractAmount &&
                obj.homeData.contractAmount.percentage < 0
                  ? 'down'
                  : obj.homeData.contractAmount &&
                    obj.homeData.contractAmount.percentage > 0
                  ? 'up'
                  : ''
              "
            >
              {{
                obj.homeData.contractAmount &&
                obj.homeData.contractAmount.percentage > 0
                  ? '+'
                  : ''
              }}
              {{
                obj.homeData.contractAmount
                  ? obj.homeData.contractAmount.percentage
                  : 0
              }}%
            </i>
            <em>较上一日新增</em>
          </span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item">
          <h6>昨日新增绑定用户</h6>
          <h2>
            {{ obj.homeData.addBindUser ? obj.homeData.addBindUser.num : 0 }}
          </h2>
          <span>
            <i
              :class="
                obj.homeData.addBindUser &&
                obj.homeData.addBindUser.percentage < 0
                  ? 'down'
                  : obj.homeData.addBindUser &&
                    obj.homeData.addBindUser.percentage > 0
                  ? 'up'
                  : ''
              "
            >
              {{
                obj.homeData.addBindUser &&
                obj.homeData.addBindUser.percentage > 0
                  ? '+'
                  : ''
              }}
              {{
                obj.homeData.addBindUser
                  ? obj.homeData.addBindUser.percentage
                  : 0
              }}%
            </i>
            <em>较上一日新增</em>
          </span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item">
          <h6>存储空间</h6>
          <h2>
            {{ obj.homeData.storage ? obj.homeData.storage.num : 0 }}
          </h2>
          <span>
            <i
              :class="
                obj.homeData.storage && obj.homeData.storage.percentage < 0
                  ? 'down'
                  : obj.homeData.storage && obj.homeData.storage.percentage > 0
                  ? 'up'
                  : ''
              "
            >
              {{
                obj.homeData.storage && obj.homeData.storage.percentage > 0
                  ? '+'
                  : ''
              }}
              {{ obj.homeData.storage ? obj.homeData.storage.percentage : 0 }}%
            </i>
            <em>较上一日新增</em>
          </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { homeApi } from '@/api/api'
import {} from 'echarts'
interface OBJ {
  homeData?: any
}
const obj = reactive<OBJ>({
  homeData: {}
})
const getHomeData = () => {
  homeApi({}).then(res => {
    obj.homeData = res.data
  })
}
getHomeData()
</script>

<style scoped lang="scss">
.count-box {
  width: 100%;
  ::v-deep(.el-row) {
    margin: 0 !important;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  ::v-deep(.el-col) {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
  @media (min-width: 576px) {
    ::v-deep(.el-col-6) {
      width: 50%;
    }
  }
  @media (min-width: 1200px) {
    ::v-deep(.el-col-6) {
      width: 25%;
    }
  }
  .item {
    background: #7a6fbe url(../../assets/image/bg-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    padding: 20px;
    & * {
      color: #fff;
      font-style: inherit;
    }
    h6 {
      margin: 0;
      font-size: 16px;
    }
    h2 {
      font-size: 24px;
    }
    span {
      i {
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 500;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        background: #f5b225;
        &.up {
          background: #29bbe3;
        }
        &.down {
          background: #ec536c;
        }
      }
      em {
        margin-left: 8px;
      }
    }
  }
}
</style>
